<template>
  <div>
     <p>{{ num }}</p>
     <button @click="num++">点击+1</button>
  </div>
</template>

<script>
import { onActivated, onDeactivated, onMounted, onUnmounted, ref } from 'vue';

export default {
    name:'MyLeft',
    setup(){
        let num = ref(2);

        //组件挂载
        onMounted(()=>{
            console.log("on monunted 被调用了！");
        })
        //组件卸载时
        onUnmounted(()=>{
            console.log("on un mounted 被调用了！");
        })

        //组件被缓存显示时
        onActivated(()=>{
            console.log("组件被激活时");
        })
        //组件被缓存隐藏时
        onDeactivated(()=>{
            console.log("组件被隐藏时");
        })
        return{
            num,
        }
    },

 
    

}
</script>

<style>

</style>